<script setup>
import DetailForm from "../DetailForm/index.vue";

const props = defineProps({
  // eslint-disable-next-line vue/valid-define-props
  ...DetailForm.props,
  modelValue: {
    type: Boolean,
    default: false
  },
  mode: {
    type: String,
    default: "dialog",
    validator: (val) => ["dialog", "drawer"].includes(val)
  }
});

const emit = defineEmits(["update:modelValue", "success"]);

const formRef = ref();
const data = ref({ loading: false });
let myVisible = computed({
  get: function () {
    return props.modelValue;
  },
  set: function (val) {
    emit("update:modelValue", val);
  }
});

const title = computed(() =>
  props.id == "" ? "账户流水新增" : "账户流水编辑"
);

function onSubmit() {
  data.value.loading = true;
  formRef.value.submit(() => {
    emit("success");
    data.value.loading = false;
    onCancel();
  });
}

function onCancel() {
  myVisible.value = false;
}
</script>

<template>
  <div>
    <el-dialog
      v-if="props.mode === 'dialog'"
      v-model="myVisible"
      :title="title"
      width="600px"
      :close-on-click-modal="true"
      append-to-body
      destroy-on-close
    >
      <DetailForm ref="formRef" v-bind="$props" />
      <template #footer>
        <el-button size="large" @click="onCancel">取 消</el-button>
        <el-button
          type="primary"
          size="large"
          @click="onSubmit"
          :loading="data.loading"
          >确 定</el-button
        >
      </template>
    </el-dialog>
    <el-drawer
      v-else-if="props.mode === 'drawer'"
      v-model="myVisible"
      :title="title"
      size="35%"
      :close-on-click-modal="true"
      destroy-on-close
    >
      <DetailForm ref="formRef" v-bind="$props" />
      <template #footer>
        <el-button size="large" @click="onCancel">取 消</el-button>
        <el-button
          type="primary"
          size="large"
          @click="onSubmit"
          :loading="data.loading"
          >确 定</el-button
        >
      </template>
    </el-drawer>
  </div>
</template>
